@use "../mixins/namespace" as *;

/* 自定义暗黑模式样式 */
html.dark {
  body {
    color: var(--#{$el-namespace}-text-color-regular);
  }

  // 图片降低亮度
  img {
    filter: brightness(0.92) saturate(1.25);
  }

  .#{$admin-namespace}-login {
    background-color: var(--#{$el-namespace}-fill-color-extra-light);

    &__box {
      background-color: var(--#{$el-namespace}-mask-color);

      &__form {
        background-color: var(--#{$el-namespace}-bg-color);
        box-shadow: 5px 5px 15px rgb(161 161 161 / 20%);

        &__text {
          color: var(--#{$el-namespace}-text-color-primary);
        }
      }
    }
  }

  /* 克隆并自定义 ElMessage 样式，不会影响 ElMessage 原本样式，在 src/utils/message.ts 中调用自定义样式 ElMessage 方法即可，非暗黑模式在 src/style/element-plus.scss 文件进行了适配 */
  .antd-message {
    background-color: var(--#{$admin-namespace}-gray-200) !important;
    background-image: initial !important;
    box-shadow:
      rgb(13 13 13 / 12%) 0 3px 6px -4px,
      rgb(13 13 13 / 8%) 0 6px 16px 0,
      rgb(13 13 13 / 5%) 0 9px 28px 8px !important;

    & .#{$el-namespace}-message__content {
      color: #ffffff !important;
      pointer-events: all !important;
      background-image: initial !important;
    }

    & .#{$el-namespace}-message__closeBtn {
      &:hover {
        color: var(--#{$el-namespace}-text-color-regular);
        background-color: var(--#{$admin-namespace}-gray-400);
        border-radius: 50%;
      }
    }
  }
}
